import classNames from "classnames";
import React, { useContext } from "react";
import { ThemeContext } from "../../theme";
import { useStyles } from "../style";

interface Props {
  count: number;
  className?: string;
  children?: React.ReactNode;
  itemWidth: string;
}

export default function RenderPlaceHolder({
  count,
  className,
  children,
  itemWidth,
}: Props) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });

  return (
    <div className={classNames(classes.flexWrap, className)}>
      {new Array(count).fill(undefined).map((x) => (
        <span style={{ width: itemWidth }} className={classes.item}>
          -
        </span>
      ))}
      {children}
    </div>
  );
}
